<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch" />
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public" />
      <van-tab title="加密" name="private" />
    </van-tabs>
    <div style="margin-bottom: 16px" />
    <van-button class="add-button" title="新建队伍" type="primary" icon="plus" @click="toAddTeam" />
    <div class="loading-wrapper" v-if="loading">
      <van-loading type="spinner" size="36px">加载中...</van-loading>
    </div>
    <template v-else>
      <team-card-list v-if="teamList?.length > 0" :teamList="teamList" />
      <van-empty v-else description="数据为空"/>
    </template>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";

const active = ref('public')
const router = useRouter();
const searchText = ref('');
const loading = ref(true)

/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name) => {
  // 查公开
  if (name === 'public') {
    listTeam(searchText.value, 0);
  } else {
    // 查加密
    listTeam(searchText.value, 2);
  }
}

// 跳转到创建队伍页
const toAddTeam = () => {
  router.push({
    path: "/team/add"
  })
}

const teamList = ref([]);

/**
 * 搜索队伍
 * @param val
 * @param status
 * @returns {Promise<void>}
 */
const listTeam = async (val = '', status = 0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status,
    },
  });
  loading.value = false
  if (res?.code === 0) {
    teamList.value = res.data
  } else if (res?.code === 40100) {
    Toast.fail('无权限查看加密队伍！');
  }else {
    Toast.fail('加载队伍失败，请刷新重试');
  }
}

// 页面加载时只触发一次
onMounted( () => {
  listTeam();
})

const onSearch = (val) => {
  listTeam(val);
};

</script>

<style scoped>
.loading-wrapper {
  position: fixed; /* 覆盖整个页面 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Flex 居中 */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8); /* 可选：加半透明遮罩 */
  z-index: 9999;
}/* 确保覆盖在最上层 */
</style>
